<!--修改密码-->
<template>
    <div class="user-password">
        <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="原密码：" prop="oldPassword">
                <el-input v-model="ruleForm.oldPassword" style="width: 300px" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="newPassword">
                <el-input v-model="ruleForm.newPassword" style="width: 300px" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认新密码：" prop="confirmNewPassword">
                <el-input v-model="ruleForm.confirmNewPassword" style="width: 300px" show-password></el-input>
            </el-form-item>
        </el-form>
        <el-button style="margin-left: 300px" type="success" @click="changePasswordClick">修改密码</el-button>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { updateUserPassword } from "@/api/user"
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import store from '@/store'

const ruleForm = reactive({
    oldPassword: "",
    newPassword: "",
    confirmNewPassword: ""
});

const router = useRouter();


const changePasswordClick = () => {

    if (ruleForm.oldPassword == "") {
        ElMessage.error("原密码不能为空!");
    } else if (ruleForm.newPassword == "") {
        ElMessage.error("新密码不能为空!");
    } else if (ruleForm.confirmNewPassword == "") {
        ElMessage.error("确认新密码不能为空!");
    } else if (ruleForm.newPassword != ruleForm.confirmNewPassword) {
        ElMessage.error("新密码与确认新密码不一致!");
    } else {
        updateUserPassword({
            oldPassword: ruleForm.oldPassword,
            newPassword: ruleForm.newPassword
        }).then(res => {
            if (res.flag == true) {
                ElMessage.success(res.message);
                //修改密码后退出登录
                store.commit('updateLoginUserNickname', '');
                store.commit('removeStorage');
                store.commit('resetState')
                router.push("/login").catch((err) => err);
            } else {
                ElMessage.error(res.message);
            }
        })
    }

}



</script>

<style lang="scss" scoped>
.user-password {
    width: 900px;
    float: left;
    padding: 20px;
    background: #fff;
    height: 100%;
}
</style>